<script setup lang="ts">
import { ref, onBeforeMount, toRaw, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  changeStatus,
  queryQuotationById,
  querySupplierQuotation,
  saveSWXJ
} from "@/api/supplierQuotation.js";
import { ElMessage } from "element-plus";
import { toFormData } from "axios";
//路由信息
const route = useRoute();
const router = useRouter();

//品牌选择器
const querySupplierQuotaOptions = ref([]);

//绑定表单数据
const tableData = ref([]);

//产品信息
const formDate = ref({
  acol: 0,
  bcol: 0,
  ccol: 0,
  modelDesc: "的撒旦",
  piece: 0,
  quoteSn: "",
  remark: "",
  screenMeshCompilationType: "",
  screenMeshEdge: "",
  screenMeshMaterial: "",
  shippingCharges: 0,
  singlePrice: 0,
  singleWeight: 0,
  supplierId: 0,
  totalDeliveryTime: 0,
  totalVolume: 0
});

//产品分类
const productTypeOptions = ref([
  {
    code: 1001,
    name: "产品询价"
  }
]);
//报价信息
const SupplierQuota = ref({
  brand: "",
  model: "",
  num: "0",
  price: "",
  productType: "",
  productname: ""
});

//保存数据
async function saveSupplierQutaSWXJ() {
  let res = await saveSWXJ(formDate.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    //状态改变
    let data = {
      id: route.query.id,
      status: 2
    };
    await cgStatus(data);
    close();
    pushList();
  } else {
    ElMessage({
      message: "保存失败，请稍后重试",
      type: "error"
    });
  }
}

//跳转到列表页面
function pushList() {
  router.push("/supplierEnd/list");
}

//1待报价 2已报价 3待审核 4待修改 5未通过 6砍价修改
//状态转换
async function cgStatus(data) {
  let res = await changeStatus(data);
}
//查询产品信息
async function quotation(id) {
  let res = await queryQuotationById(id);
  if (res.code == 200) {
    SupplierQuota.value = res.data;
    tableData.value.push(res.data);
    formDate.value.singlePrice = res.data.price;
    formDate.value.piece = res.data.num;
    formDate.value.quoteSn = res.data.suCode
  }
}

//总价格
let totalMoney = computed(() => {
  let total = 0;
  total += formDate.value.piece * formDate.value.singlePrice;
  return total;
});

let totalWeight = computed(() => {
  let total = 0;
  total += formDate.value.piece * formDate.value.singleWeight;
  return total;
});

onBeforeMount(() => {
  const id = route.query.id;
  quotation(id);
});
</script>

<template>
  <div>
    <!--  产品询价单-->
    <div>
      <div
        style="
          margin: auto;
          width: 1200px;
          height: 50px;
          background-color: rgba(54, 58, 119, 0.19);
          line-height: 50px;
        "
      >
        报价信息
      </div>
      <el-form :model="SupplierQuota" style="width: 1200px; margin: auto">
        <el-row>
          <el-col :span="12">
            <el-form-item
              style="width: 500px; margin-left: 50px; margin-top: 10px"
              label="筛网工况"
            >
              <el-select v-model="SupplierQuota.brand" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              style="width: 500px; margin-top: 10px; margin-left: 50px"
              prop="model"
              label="若其他工况"
            >
              <el-select v-model="SupplierQuota.model" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              style="width: 500px; margin-top: 5px; margin-left: 25px"
              label="折钩默认角度"
            >
              <el-select disabled>
                <el-option value="是" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              style="width: 500px; margin-top: 5px; margin-left: 50px"
              label="产品类型"
            >
              <el-select v-model="SupplierQuota.productType" disabled>
                <el-option
                  v-for="item in productTypeOptions"
                  :key="item.code"
                  :value="item.code"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="product-info-container">
        <h2>产品信息</h2>
        <el-table :data="tableData" border style="width: 1200px">
          <el-table-column
            prop="productname"
            label="产品名称"
            width="100"
          />
          <el-table-column prop="drawingNumber" label="长(mm)" width="50">
            <el-input v-model="formDate.length" placeholder="请输入" />
          </el-table-column>
          <el-table-column prop="material" label="宽(mm)" width="50">
            <el-input v-model="formDate.width" placeholder="请输入" />
          </el-table-column>
          <el-table-column prop="num" label="丝径(mm)" width="50">
            <el-input
              v-model="formDate.wireDiameter"
              type="number"
              placeholder="请输入"
            />
          </el-table-column>
          <el-table-column label="孔径(mm)" width="150">
            <el-input
              v-model="formDate.apertureSize"
              type="number"
              placeholder="请输入"
            />
          </el-table-column>
          <el-table-column prop="price" label="数量(pcs)" width="150">
            <el-input
              v-model="formDate.piece"
              type="number"
              placeholder="请输入"
            />
          </el-table-column>
          <el-table-column label="材质(Material)" width="100">
            <el-input
              v-model="formDate.screenMeshMaterial"
              placeholder="请输入"
            />
          </el-table-column>
          <el-table-column label="折钩包边" width="100">
            <el-input
              v-model="formDate.screenMeshEdge"
              placeholder="请输入"
            />
          </el-table-column>
          <el-table-column label="编织类型" width="100">
            <el-input
              v-model="formDate.screenMeshCompilationType"
              placeholder="请输入"
            />
          </el-table-column>
          <el-table-column label="预计单重(kg/件)" width="100">
            <el-input
              v-model="formDate.screenMeshEdge"
              placeholder="请输入"
            />
          </el-table-column>
          <el-table-column label="预计总重" width="100">

          </el-table-column>
          <el-table-column label="单价(USD/pc)" width="100">
            <el-input
              v-model="formDate.singlePrice"
              placeholder="请输入"
            />
          </el-table-column>
          <el-table-column label="总金额数(USD)" width="100">

          </el-table-column>
          <el-table-column label="备注" width="100">
            <el-input
              v-model="formDate.remark"
              placeholder="请输入"
            />
          </el-table-column>
        </el-table>
        <div style="width: 1200px; margin: 10px auto; background-color: white">
          <el-form>
            <el-form-item>
              <el-row style="width: 1200px; border: 1px solid #ccc">
                <el-col style="border: 1px solid #ccc" :span="4">总重量</el-col>
                <el-col style="border: 1px solid #ccc" :span="4">{{
                  totalWeight
                }}</el-col>
                <el-col style="border: 1px solid #ccc" :span="4">总金额</el-col>
                <el-col style="border: 1px solid #ccc" :span="4">{{
                  totalMoney
                }}</el-col>
                <el-col style="border: 1px solid #ccc" :span="4">核算海运费用</el-col>
                <el-col style="border: 1px solid #ccc" :span="4"
                  ><el-input
                    v-model="formDate.shippingCharges"
                    placeholder="请输入"
                /></el-col>
              </el-row>
              <el-row style="width: 1200px; border: 1px solid #ccc">
                <el-col style="border: 1px solid #ccc" :span="4"
                  >预计总体积（方）</el-col
                >
                <el-col style="border: 1px solid #ccc" :span="4"
                  ><el-input
                    v-model="formDate.totalVolume"
                    placeholder="请输入"
                /></el-col>
                <el-col style="border: 1px solid #ccc" :span="4"
                  >总交期（天）</el-col
                >
                <el-col style="border: 1px solid #ccc" :span="4"
                  ><el-input
                    v-model="formDate.totalDeliveryTime"
                    placeholder="请输入"
                /></el-col>
                <el-col style="border: 1px solid #ccc" :span="4"
                  >报价有效期</el-col
                >
                <el-col style="border: 1px solid #ccc" :span="4"
                  ><el-input
                    v-model="formDate.validityPeriod"
                    placeholder="请输入"
                /></el-col>
              </el-row>
              <el-form-item label="磨具情况说明">
                <el-row style="width: 1100px; border: 1px solid #ccc">
                  <el-col style="border: 1px solid #ccc" :span="12"
                    ><el-input
                      v-model="formDate.modelDesc"
                      placeholder="请输入"
                  /></el-col>
                </el-row>
              </el-form-item>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="saveSupplierQutaSWXJ">保存</el-button>
        <el-button type="info" @click="pushList">取消</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.product-info-container {
  width: 1200px;
  margin: 0 auto;
}

.summary-info {
  margin-top: 20px;
}

.form-item {
  margin-bottom: 15px;
}
</style>
